<template>
  <div class="paycallback">
    <nav-bar-base :backNum="-2"></nav-bar-base>
    <div class="paycallback__status">
      <img src="../../assets/images/pay-success.png" v-show="status === '0'">
      <img src="../../assets/images/pay-fail.png" v-show="status === '1'">
      <img src="../../assets/images/pay-fail.png" v-show="status === '2'">
      <span>{{statusstr}}</span>
    </div>
    <div class="paycallback__paybutton">
      <span>温馨提示：觅客直供不会以订单异常、系统升级为由，要求您点击 任何链接进行退款操作，请谨慎！</span>
    </div>

    <pay-goods @closePage="closePage" v-if="showDialog" :cellItem="shareData" :pdid='pdid'></pay-goods>
  </div>
</template>

<style lang="scss">
@import '~assets/stylesheets/main';
.paycallback {
  &__status {
    width: 100%;
    height: rem(215px);
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fef3e1;
    img {
      width: rem(50px);
      height: rem(50px);
      /*position: absolute;*/
      top: rem(50px);
    }
    span {
      margin-top: rem(20px);
      font-size: rem(40px);
      color: #d39f47;
      font-family: PingFangSC-Semibold;
    }
  }
  &__paybutton {
    width: 100%;
    /*height: rem(160px);*/
    display: flex;
    align-items: center;
    span {
      color: #92969c;
      font-family: PingFangSC-Regular;
      margin-top: rem(30px);
      margin-left: rem(27px);
      margin-right: rem(27px);
    }
  }
  &__backorder {
    width: rem(150px);
    height: rem(60px);
    background-color: white;
    border: 1px white solid;
  }
}
</style>

<script>
import * as payApi from '@/api/pay'
export default {
  data() {
    return {
      statusstr: '',
      status: '0',
      payid: '',
      showDialog: false,
      shareData: {},
      pdid: ''
    }
  },
  mounted() {
    //    status 0,支付成功 1,支付失败, 2支付取消
    this.status = this.$route.query.status
    this.payid = this.$route.query.payid
    if (this.status === 'TRADE_SUCCESS'){
        this.status = '0'
    }
    if (this.status === '0') {
      this.statusstr = '您已支付成功!'
      this.requesNetToGoods(this.payid)
    } else if (this.status === '1') {
      this.statusstr = '支付失败!'
    } else if (this.status === '2') {
      this.statusstr = '支付取消!'
    } else {
      this.status = '0'
      this.statusstr = '您已支付成功!'
      this.requesNetToGoods(this.payid)
    }
  },
  methods: {
    closePage(flag, isRetry) {
      this.showDialog = false
    },
    requesNetToGoods: function(payid) {
      let self = this
      payApi
        .paySuccessPdInfo({ payid: payid })
        .then(function(response) {
          self.shareData = response.data
          self.pdid = response.data

          self.showDialog = true
          // self.pdid = response.pdid
        })
        .catch(errors => {
          console.error(errors)
        })
    },
    requesNet(payid) {
      let self = this
      payApi
        .paySuccessShare({ payid: payid })
        .then(function(response) {
          self.shareData = response.data
          // 如果没有认证有礼和分享不弹出框

          // self.showDialog = self.shareData.isframe === '1'

          // self.shareData.isframe = '1'
          // self.shareData.isauth = '0'
          // self.shareData.isshare = '1'
        })
        .catch(errors => {
          console.error(errors)
        })
    }
  },
  components: {
    'pay-goods': () => import('cases/pay-goods')
  }
}
</script>


